import React, { Component } from 'react';
import store from './store'
import axios from 'axios'
class App extends Component {
    constructor(props) {
        super(props);
         this.state=store.getState();
    }
    componentDidMount(){
        store.subscribe(()=>{this.setState(store.getState())})
        axios.get('https://www.easy-mock.com/mock/5f630ec7fdeff7084f396501/redux/getlist').then(res=>{
             store.dispatch({
                 type:'getList',
                 data:res.data.data
             })
        })

    }
    render() { 
        return ( 
            <div>
                <div>

                   <input type='text' value={this.state.msg} onChange={e=>{
                       store.dispatch({
                           type:'changeMsg',
                           value:e.target.value
                       })
                   }}/>
                   <button onClick={()=>{
                       store.dispatch({
                           type:'addItem',
                           value:this.state.msg
                       })
                    }}>添加{this.state.msg}</button>
                </div>
                
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                            <li key={index}>{item}  <button onClick={()=>{
                                store.dispatch({
                                    type:'delItem',
                                    value:index
                                })
                            }}>删除</button> </li>
                            )
                        })
                    }
                </ul>
            </div>
         );
    }
}


 
export default App;